@tailwind base;
@tailwind components;
@tailwind utilities;

.card {
  @apply mb-5 rounded-xl bg-white p-4 dark:bg-dark-foreground sm:p-6 lg:mb-6;
}

.widget-card {
  @apply rounded-xl bg-white p-4 dark:bg-dark-foreground lg:p-5;
}

.input-dark {
  @apply w-full appearance-none rounded-lg border border-transparent bg-light-background py-3 px-4 text-sm font-bold dark:bg-2x-dark-foreground dark:placeholder:text-gray-600 sm:px-5 sm:text-base dark:disabled:text-gray-400;
}

.text-limit {
  @apply block overflow-x-hidden text-ellipsis whitespace-nowrap;
}

.is-inactive {
  @apply pointer-events-none opacity-40;
}

.grid-view {
  @apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
}

.grid-view-sidebar {
  @apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-7;
}

.page-link {
  @apply block flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-sm font-bold transition duration-200 hover:bg-light-background;
}

@layer utilities {
  .overflow-initial {
    overflow: initial;
  }
  .overflow-anywhere {
    overflow-wrap: anywhere;
  }
}
